<template>
  <div class="app-container">
    <el-button @click="onClick">父组件</el-button>
    <!-- 多个时间组件开发 -->
    <BaseDateQuick v-model="dateArr" @handleChangeDate="onDateQuick" />.
    <h3>快捷选择时间 {{ dateArr }}</h3>
    <!-- 直接进行双向绑定.不用再回调方向里面进行数据处理. -->
    <BaseDatePicker v-model="dateStr" @input="onDatePicker" />
    <h3>时间 {{ dateStr }}</h3>

    <BaseInput v-model="searchText" />
    <h3>输入框 {{ searchText }}</h3>
    <!-- <BaseInput v-model="dateArr" />-->

  </div>
</template>

<script>
import BaseInput from '@/components/BaseInput'
import BaseDatePicker from '@/components/BaseDatePicker'
import BaseDateQuick from '@/components/BaseDateQuick'

export default {
  name: 'ChartTypebar',
  components: {
    BaseInput,
    BaseDatePicker,
    BaseDateQuick
  },
  data() {
    return {
      searchText: '',
      dateArr: [],
      dateStr: ''
    }
  },
  mounted() {

  },
  created() {

  },
  methods: {
    onClick() {
      console.log('searchText:', this.searchText, 'dateStr:', this.dateStr)
    },
    onDateQuick(value) {
      console.log('父组件接受onDatePicker', value)
    },
    onDatePicker(value) {
      console.log('父组件接受onDatePicker', value)
    }
  }

}
</script>

<style>

</style>
